<template>
	<view class="exchange">
		<view class="top">
			<view class="left">UFT静态账户：<text style="color:#03AD8F;">{{balance.uft_freeze | numFilter}}</text></view>
			<view class="right">
				<view>
					UFT金额：<text style="color:#03AD8F;">{{balance.uft_balance*1 + balance.uft_freeze*1}}</text>
				</view>
				<view>
					USDT金额：<text style="color:#03AD8F;">{{balance.usdt_balance | numFilter}}</text>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="box">
				<view class="box_top" style="border-bottom:1px solid #E0E2E3;">
					<view class="left">
						<image class="image" src="../../static/img/uft.png" mode="aspectFit"></image>
						<text>UFT</text><text style="opacity: 0;">T</text>
					</view>
					<view class="right" @click="show = !show">
						<text style="color:#03AD8F;">{{choicenum}} <text class="iconfont">&#xe736;</text> </text>
						<view class="list" v-if=show>
							<view class="listtext" v-for='(item,index) in list' :key='index'>
								<text class="text" :class="{active:index==inActive}" @click="selection(index,item.number)">{{item.number}}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="box_top">
					<view class="left">
						<image class="image" src="../../static/img/USDT@2x.png" mode="aspectFit"></image>
						<text>USDT</text>
					</view>
					<view class="right money">
						<view>{{usdtnum | numFilter}}</view>
						<view style="font-size: 12px;">兑换手续费：<text style="color:#D14B64;">{{feenum | numFilter}}</text></view>
					</view>
				</view> -->
			</view>
		</view>
		<view class="btn">
			<button type="primary" @click="showBottomPopup" data-position="bottom">确定挂售</button>
		</view>

		<uni-popup :show="showPopupBottom" :type="popType" v-on:hidePopup="hidePopup">
			<view class="bottom-popup">
				<text class="title">密码验证</text>
				<view class="input">
					<m-input class="m-input" type="password" displayable v-model="password" placeholder="请输入交易密码"></m-input>
				</view>
				<button type="primary" @click="exchange" style="margin: 10px 0;">确定挂售</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '../../components/uni-popup.vue';
	import mInput from '../../components/m-input.vue';
	export default {
		data() {
			return {
				list: [{
						'number': 500
					},
					{
						'number': 1000
					},
					{
						'number': 1500
					},
					{
						'number': 2000
					},
					{
						'number': 2500
					},
					{
						'number': 3000
					},
					{
						'number': 3500
					},
					{
						'number': 4000
					},
					{
						'number': 4500
					},
					{
						'number': 5000
					}
				],
				show: false,
				inActive: '0',
				choicenum: '500', //选择的UFT数量
				balance: [],
				fee: '',
				usdtnum: '', //实际到账USDT数量
				feenum: '', //手续费
				static_profit: '', //UFT静态账户
				showPopupBottom: false,
				popType: 'middle',
				password: '', //交易密码
				uftusdt: '', //兑换率
			};
		},
		components: {
			uniPopup,
			mInput
		},
		onShow: function() {
			this.getData();
		},
		methods: {
			//统一的关闭popup方法
			hidePopup: function() {
				this.showPopupBottom = false;
			},
			//展示底部 popup
			showBottomPopup: function() {
				this.hidePopup();
				this.popType = 'bottom';
				this.showPopupBottom = true;
			},
			//获取账号余额和手续费
			getData: function() {
				const _this = this;
				this.$request.post("/api/wallet/getUserBalance", {})
					.then(res => {
						if (res.data.code == 1) {
							_this.fee = res.data.data.fee;
							_this.balance = res.data.data;
							_this.uftusdt = res.data.data.uftusdt;
							//兑换手续费
							_this.feenum = _this.choicenum * _this.uftusdt * (_this.fee / 100);
							//兑换后USDT的数量
							_this.usdtnum = _this.choicenum * _this.uftusdt - _this.feenum;
						}
					})
					.catch(error => {
						console.error('error:', error);
					});
			},
			selection: function(index, number) {
				this.inActive = index;
				this.choicenum = number;
				//兑换手续费
				this.feenum = this.choicenum * this.uftusdt * (this.fee / 100);
				//兑换后USDT的数量
				this.usdtnum = this.choicenum * this.uftusdt - this.feenum;
			},
			//用户兑换
			exchange: function() {
				const _this = this;
				if (!_this.password) {
					uni.showToast({
						title: '请输入交易密码',
						icon: "none",
					});
					return false;
				}
				const data = {
					type: 0,
					money: this.choicenum,
					password: this.password
				}
				this.$request.post("/api/wallet/exchange", {
						data: data
					})
					.then(res => {
						uni.showToast({
							title: res.data.msg,
							icon: "none",
							duration: 2000
						});
						if (res.data.code == 1) {
							uni.navigateTo({
								url: './success',
							});
						}
					})
					.catch(error => {
						console.error('error:', error);
					});
			}
		},
		filters: {
			numFilter(value) {
				// 截取当前数据到小数点后两位
				let realVal = Number(value).toFixed(4)
				// num.toFixed(2)获取的是字符串
				return Number(realVal)
			}
		}
	}
</script>

<style lang="less">
	.exchange {
		width: 100%;
		display: flex;
		flex-direction: column;

		.top {
			display: flex;
			height: 60px;
			border-top: 5px solid #F1F1F1;
			border-bottom: 10px solid #F1F1F1;
			align-items: center;
			justify-content: space-between;
			padding: 0 20upx;

			.left {
				font-size: 14px;
			}

			.right {
				font-size: 12px;
				text-align: right;
			}
		}

		.content {
			.box {
				border: 1px solid #E0E2E3;

				.box_top {
					display: flex;
					align-items: center;
					height: 60px;

					.left {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 150px;
						height: 100%;
						border-right: 1px solid #E0E2E3;

						.image {
							width: 30px;
							height: 30px;
							margin-right: 10px;
						}
					}

					.right {
						display: flex;
						align-items: center;
						justify-content: center;
						flex: 1;
						font-size: 16px;
						height: 100%;
						position: relative;

						.iconfont {
							margin-left: 6px;
						}

						.list {
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: flex-start;
							z-index: 1000;
							position: absolute;
							top: 60px;
							left: 0;
							width: 100%;
							background: #FFF;
							box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);

							.listtext {
								width: 100%;
								height: 80upx;
								display: flex;
								align-items: center;
								justify-content: center;

								.text {
									width: 70%;
									padding: 10upx 0;
									text-align: center;
									color: #1D7BFF;
									font-size: 14px;
									border-bottom: 1px solid #E0E2E3;
								}

								.active {
									color: #03AD8F;
								}
							}
						}
					}

					.money {
						flex-direction: column;
					}
				}
			}
		}

		.btn {
			height: 70px;
			width: 70%;
			margin: 0 auto;
		}
	}

	.bottom-popup {
		width: 90%;
		margin: 0 auto;

		.title {
			line-height: 60px;
		}

		.input {
			border-bottom: 1px solid #F1F1F1;
			font-size: 14px;
		}
	}
</style>
